import { List, Divider } from 'antd-mobile'
import { useParams } from 'react-router-dom'
import { useState, useEffect } from 'react'
import Nabar from '../../conpoment/Nabar'
import style from './index.module.css'
import qrImg from './img/image.png'

interface UserData {
  id: string | number
  name: string
  relation: string
  standing: string
  phone: string
  sex: string
  age: string
  birthday: string
  idType: string
  address: string
  addressDetail: string
}

function Index() {
  const { id } = useParams<{ id: string }>()
  const [userData, setUserData] = useState<UserData | null>(null)

  useEffect(() => {
    if (id) {
      try {
        const decodedData = JSON.parse(decodeURIComponent(id))
        setUserData(decodedData)
      } catch (error) {
        console.error('解析用户数据失败:', error)
      }
    }
  }, [id])

  // 格式化身份证号，中间部分用星号隐藏
  const formatIdNumber = (idNumber: string) => {
    if (!idNumber || idNumber.length < 8) return idNumber
    const start = idNumber.slice(0, 4)
    const end = idNumber.slice(-3)
    const middle = '*'.repeat(idNumber.length - 7)
    return `${start}${middle}${end}`
  }

  return (
    <div className="page-with-static-navbar">
      <Nabar title='就诊人详情' sticky={false} />
      <div className={style.container}>
        <div className={style.qrWrapper}>
          <img src={qrImg} alt="二维码" className={style.qrImg} />
        </div>
        <Divider className={style.sectionDivider} />
        <div className={style.sectionTitle}>基本信息</div>
        <List className={style.infoList}>
          <List.Item extra={userData?.relation || '本人'} arrow>
            就诊人关系
          </List.Item>
          <List.Item extra={userData?.name || '王小柯'}>
            患者姓名
          </List.Item>
          <List.Item extra={userData?.sex || '女'}>
            性别
          </List.Item>
          <List.Item extra={userData?.age ? `${userData.age}岁` : '20岁'}>
            年龄
          </List.Item>
          <List.Item extra={userData?.idType || '居民身份证'} arrow>
            证件类型
          </List.Item>
          <List.Item extra={userData?.standing ? formatIdNumber(userData.standing) : '5023************71'}>
            证件号
          </List.Item>
          <List.Item extra={userData?.phone || '13666666666'}>
            联系电话
          </List.Item>
          <List.Item extra={userData?.address ? `${userData.address}${userData.addressDetail ? '-' + userData.addressDetail : ''}` : '四川省-成都市-锦江区'} arrow>
            现住址
          </List.Item>
        </List>
      </div>
    </div>
  )
}

export default Index
